<template>
	<view class="container">
		
			<view class="seven">
				<view class="one-right" @click="sell">
					<p style="font-weight: bold;">保障<span style="font-weight: normal;margin-left: 20rpx;font-size:30rpx">支持7天无理由退款·消费者保障服务</span><image src="../../static/返回.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;margin-left: 100rpx;"></image></p>
				</view>
				
				<view class="share">
					<view :class="{'box': share}" @click="display">
					</view>
					<view class="share-item" :class="{'show': share}">
						<view class="share-con">
							<p class="title">保障说明<span  @click.stop="display">×</span></p>
							<view class="cont flex">
								<image src="../../static/images/seven_03.png"></image>
								<view class="cont-r">
									<p class="strong">支持7天无理由退货</p>
									1.未使用的，可全额退款<br>
									2.使用部分优惠券的，退款时直接扣除已发生抵扣金额后予以退款，即退款金额=购买金额-已使用优惠券面额
				
								</view>
							</view>
							<view class="cont flex">
								<image src="../../static/images/seven_06.png"></image>
								<view class="cont-r">
									<p class="strong">消费者保障服务</p>
									如商品存在与描述不符的情况，你有权申请退款					
								</view>							
							</view>				
								
						</view>				
					</view>
				</view>
			</view>
		</view>
		
			
		</view>

		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
export default {
		data() {
			return {
				share: false
			}
		},
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
			if(e.scrollTop>150){ //当距离大于150时显示回到顶部按钮
				   this.topState = true
			}else{ //当距离小于600时显示回到顶部按钮
				   this.topState = false
			}
		},
		
	
		methods: {
			top() { //回到顶部  
					uni.pageScrollTo({ 
					scrollTop: 0, duration: 300 
				    }); 
			    },

			sell() {
				this.share = true;
			},
			// 隐藏分享
			display() {
				this.share = false;
			},
		
			
		
		}
	}

</script>

<style lang="scss">
	.share {
		width: 100%;
		height: 100%;
		background: #000000;
		position: relative;
		z-index: 1;
	}

	.box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	// 进入分享动画
	.show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}

	// 离开分享动画
	.share-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;
    border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		
		.share-con {
			width: 90%;
			height: 550rpx;
			padding: 30rpx;
			margin: auto;
			align-items: center;
		}
  
	.flex{display: flex;justify-content: space-between;}
		.cont-r{width: 80%;padding-left: 20rpx;font-size: 28rpx;color: #666;line-height: 45rpx;}
		.cont image{width: 140rpx ;height: 140rpx;}
    .title{font-size: 50rpx;font-weight: bold;text-align: center;margin-bottom: 20rpx;}
		.title span{float:right;color: #999;}
		.cont{margin-bottom: 40rpx;}
		.strong{font-size: 35rpx;color: #000000;margin-bottom: 10rpx;}
		
	}
	
</style>
